﻿@using System.Data.Entity
@model ExpressQuiz.ViewModels.EditQuizViewModel



<ul class="breadcrumb" style="margin-bottom: 5px;">
    <li class="active">Quiz</li>
</ul>

@using (Ajax.BeginForm("Edit", "Quizzes", new AjaxOptions()
{
    UpdateTargetId = "content",
    HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "applyValidation",
    OnFailure = "handleError",
    OnBegin = "beforePost",

}))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">


        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Quiz.QuizId)
        @Html.HiddenFor(model => model.QuestionOrder)
        @Html.HiddenFor(model => model.Quiz.CreatedBy)
        
        <div class="form-group">
            @Html.LabelFor(m => m.SelectedCategory, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(m => m.SelectedCategory, Model.Categories, htmlAttributes: new { @class = "form-control" })
            </div>

        </div>
        
        <div class="form-group">
            @Html.LabelFor(model => model.NewCategory, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.NewCategory, new { htmlAttributes = new { @class = "form-control" } })
                @if (ViewData.ModelState["NewCategory"] != null && ViewData.ModelState["NewCategory"].Errors.Any())
                {
                    <span class="field-validation-error text-danger">
                        @ViewData.ModelState["NewCategory"].Errors[0].ErrorMessage
                    </span>
                }  
            </div>

        </div>
        

        <div class="form-group">
            @Html.LabelFor(model => model.Quiz.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Quiz.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Quiz.Name, "", new { @class = "text-danger" })
                @if (ViewData.ModelState["Name"] != null && ViewData.ModelState["Name"].Errors.Any())
                {
                    <span class="field-validation-error text-danger">
                        @ViewData.ModelState["Name"].Errors[0].ErrorMessage
                    </span>
                }  
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.Quiz.Summary, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Quiz.Summary, new { htmlAttributes = new { @class = "form-control", @rows = 5 } })
                @Html.ValidationMessageFor(model => model.Quiz.Summary, "", new { @class = "text-danger" })
            </div>
        </div>
        
        <div class="form-group">
            @Html.LabelFor(model => model.Quiz.IsTimeable, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
               
                <div class="checkbox">
                    @Html.CheckBoxFor(model => model.Quiz.IsTimeable, new { htmlAttributes = new { @class = "form-control checkbox" } })
                </div>
              
            </div>
        </div>
        
        <div class="form-group">
            @Html.LabelFor(model => model.Quiz.Locked, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.CheckBoxFor(model => model.Quiz.Locked, new { htmlAttributes = new { @class = "form-control checkbox" } })
                </div>

            </div>
        </div>
        
        <div class="form-group">
            @Html.LabelFor(model => model.Quiz.AllowPoints, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @{

                  
                         <div class="checkbox">
                                @Html.CheckBoxFor(model => model.Quiz.AllowPoints, new { htmlAttributes = new { @class = "form-control checkbox", } })
                            </div>

                }
               

            </div>
        </div>
        
      

        <div class="form-group">
            <div class="row">
                
                <div class="col-md-4">
                    
                    @Ajax.ActionLink("Add question", "CreateQuestion", "Quizzes", new { id = Model.Quiz.QuizId, orderId = Model.Quiz.QuestionCount }, new AjaxOptions()
                                    {
                                        InsertionMode = InsertionMode.Replace,
                                        HttpMethod = "Get",
                                        UpdateTargetId = "content",
                                        OnSuccess = "applyValidation",
                                        OnFailure = "handleError"

                                    }, htmlAttributes: new { @class = "btn btn-primary " })



                    <button type="submit" class="btn btn-primary has-spinner">
                        <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span>
                        Save
                    </button>
                    

                </div>
             
            </div>
        </div>
       
     
       
        <hr />
      
          

         
            <table id="questionsTbl" class="table table-striped table-hover table-bordered">
                <thead>
                    <tr>
                        <td></td>
                        <td>Question</td>
                        <td>Answers</td>
                    </tr>

                </thead>
                <tbody>
                    @{

    foreach (var q in Model.Quiz.Questions.OrderBy(x => x.OrderId))
    {
        <tr id="@q.QuestionId">
            <td class="dragHandle"></td>
            <td>
                @q.Text
            </td>
            <td>
                @q.AnswerCount
            </td>
            <td>
                @Ajax.ActionLink("Edit", "EditQuestion", "Quizzes", new { id = q.QuestionId }, new AjaxOptions()
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "Get",
                    UpdateTargetId = "content",
                    OnSuccess = "applyValidation",
                    OnFailure = "handleError"

                })

            </td>
            <td>
                <a href="#" data-id="@q.QuestionId" class="delete-question">Delete</a>
            </td>

        </tr>

    }
                    }
                </tbody>
            </table>

        </div>
}




<script>
    
   

    $(function () {

        $("#questionsTbl").tableDnD({
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                var ids = "";
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i] !== undefined) {
                        ids += rows[i].id + ",";
                    }
                }
                $("#QuestionOrder").val(ids);
            },
            dragHandle: ".dragHandle"
        });

    
        $("#questionsTbl tr").hover(function () {
            $(this.cells[0]).addClass('showDragHandle');
        }, function () {
            $(this.cells[0]).removeClass('showDragHandle');
        });



        $('.delete-question').click(function () {
            
            $.ajax({
                url: "/Quizzes/DeleteQuestion/" + this.getAttribute("data-id"),
                type: 'POST',
                headers: ExpressQuiz.AjaxHelper.createRequestionVerificationTokenHeader(),
                success: function (result) {
                    $("#content").empty().html(result);

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    handlerError(jqXHR.responseText);
                    
                }
            });

            return false;
        });
    });

   
</script>

